<template>
  <div class="zh-studystatus-import">
    <div class="classIndex_h">
      <a @click="$router.go(-1)">学生档案</a>
      <strong><i>></i>批量导入</strong>
    </div>
    <div class="zh-import-comter">
      <el-button plain @click="downloadDemo">下载模板</el-button>
      <uploader
        :options="uploadOptions"
        :autoStart="false"
        ref="uploader"
        :file-status-text="statusText"
        @files-submitted="fileSubmit"
        @file-removed="fileRemoved"
        @file-success="fileSuccess"
        @file-error="fileFail"
        class="uploader-example"
      >
        <uploader-unsupport></uploader-unsupport>
        <uploader-btn
          :directory="false"
          :attrs="attrs"
          v-if="selectFileShow"
          :single="true"
          >选择文件</uploader-btn
        >
        <uploader-list v-if="!selectFileShow"></uploader-list>
      </uploader>
      <el-button
        type="primary"
        v-if="!selectFileShow"
        @click="fileUpload"
        style="margin-top: 10px"
        >确定导入</el-button
      >
    </div>
    <div class="zh-import-text">
      <p>注意事项:</p>
      <p>1、Excel表从示例以下开始有效。</p>
      <p>2、表头红色字体为必填项，黑色字体为选填项。</p>
      <p>3、时间格式统一按照2019-01-01格式填写，否则将导入失败。</p>
      <p>4、国籍为外国国籍时，民族填“无”。</p>
      <p>5、户口性质填：本地城镇、本地农村、非本地城镇、非本地农村。</p>
      <p>6、学生来源分为：走读生、寄读生、借读生、旁听生。</p>
      <p>
        7、若无残疾，则不用填写残疾类型；若无特殊病例，则不用填写病例类型；非低保或边缘户，不用填低保户相关证件号。
      </p>
      <p>
        8、学生特长限制为50字以内，学习经历限制为200字内，超出则系统无法录入。
      </p>
    </div>
    <div class="zh-import-table">
      <p>例：</p>
      <div class="zh-table">
        <div class="zh-table-contents">
          <el-table :data="importData" border fixed style="width: 100%">
            <el-table-column
              label="基础信息"
              align="center"
              show-overflow-tooltip
              >>
              <el-table-column
                prop="1"
                label="账号"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="2"
                label="真实姓名"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="3"
                label="姓名拼音"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="4"
                label="性别"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="5"
                label="学号"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="6"
                label="入学时间"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="7"
                label="国籍"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="8"
                label="民族"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="9"
                label="户口性质"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="10"
                label="户口所在地"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="11"
                label="籍贯"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="12"
                label="联系方式"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="13"
                label="身份证号"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="14"
                label="居住地址"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="15"
                label="是否流动人口"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="16"
                label="学生特长及备注"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="家庭信息"
              align="center"
              show-overflow-tooltip
              >>
              <el-table-column
                prop="17"
                label="家长账号"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="18"
                label="真实姓名"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="19"
                label="关系"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="20"
                label="是否监护人"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="21"
                label="职务"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="22"
                label="单位地址"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="23"
                label="国籍"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="24"
                label="民族"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="25"
                label="籍贯"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="26"
                label="户籍所在地"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="27"
                label="身份证号"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="来源信息"
              align="center"
              show-overflow-tooltip
              >>
              <el-table-column
                prop="28"
                label="原学校名称"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="29"
                label="入学时间"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="30"
                label="学生来源"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="31"
                label="升学准考证号"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="32"
                label="来源地区"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="33"
                label="学习经历"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="其他信息"
              align="center"
              show-overflow-tooltip
            >
              <el-table-column
                prop="34"
                label="是否独生子女"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="35"
                label="是否需要申请资助"
                align="center"
                width="140"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="36"
                label="是否享受一补"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="37"
                label="是否烈士或优抚子女"
                align="center"
                width="150"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="38"
                label="是否提交真实材料"
                align="center"
                width="140"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="39"
                label="是否孤儿"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="40"
                label="是否残疾"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="41"
                label="残疾类型"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="42"
                label="是否寄宿"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="43"
                label="是否择校生"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="44"
                label="是否留守儿童"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="45"
                label="是否特殊病例学生"
                align="center"
                width="140"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="46"
                label="病例类型"
                align="center"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="47"
                label="是否低保或边缘户"
                align="center"
                width="140"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="48"
                label="低保或边缘户证件号"
                align="center"
                width="150"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import {uploaderFileFail, downloadBatchDemo, longTimeMessage} from './../../../tools/tool';

export default {
  data() {
    return {
      messageObj: {},
      statusText: {
        success: "上传成功",
        error: "上传出错",
        uploading: "正在上传...",
        paused: "暂停",
        waiting: "等待上传",
      },
      selectFileOrNot: false, //是否选中文件
      uploadOrNot: false, //是否已经上传
      uploadInfo: {
        file_name: "",
        file_path: "",
        file_size: 0,
      },
      attrs: {
        accept: [
          "application/vnd.ms-excel",
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        ],
      },
      uploadOptions: {
        target: this.BASE_URL + "/api/user/vue_userdemo_upload",
        testChunks: false,
        headers: { Authorization: `Bearer ` + this.$g.access_token },
      },
      fileList: [],
      rules: {},
      selectFileShow: true, //是否显示选择文件按钮
      uploadRetryTimes: 100, //文件最大重传次数
      importData: [
        {
          1: "zhaoxiaowei",
          2: "张小伟",
          3: "zhaoxiaowei",
          4: "男",
          5: "20181013",
          6: "2018-6-9",
          7: "中国",
          8: "汉族",
          9: "本地城镇",
          10: "广州番禺区",
          11: "广东佛山",
          12: "18966254526",
          13: "440919955224566584",
          14: "广州番禺区西环路流秀花园3栋1204",
          15: "否",
          16: "英语口语流利，会钢琴、小提琴",
          17: "zhangwei",
          18: "张伟",
          19: "父子",
          20: "是",
          21: "公务员",
          22: "广州番禺区西环路街道办",
          23: "中国",
          24: "汉族",
          25: "广州番禺区",
          26: "广州番禺区",
          27: "440919955224566584",
          28: "广州番禺阳光中学",
          29: "2019-09-01",
          30: "走读生",
          31: "23654123987456",
          32: "广州番禺区",
          33: "2016年入学，再番禺阳光中学读初一",
          34: "是",
          35: "否",
          36: "否",
          37: "否",
          38: "是",
          39: "否",
          40: "否",
          41: "",
          42: "否",
          43: "是",
          44: "否",
          45: "否",
          46: "",
          47: "否",
          48: "",
        },
      ],
      excelUploader: null, // 上传组件引用
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.excelUploader = this.$refs.uploader.uploader;
    });
  },
  methods: {
    /**
     * 下载导出模板
     */
    downloadDemo() {
      let url = this.BASE_URL + "/index/resource/studystatus_import_demo";
      this.downloadBatchDemo(url);
    },
    /**
     * 下载批量导入模板
     * @param {String} url 导出模板地址
     */
    downloadBatchDemo(url) {
      let form = document.createElement("form");

      form.action = url;
      form.method = "get";
      document.body.appendChild(form);
      form.submit();
      document.body.removeChild(form);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.selectFileOrNot) {
            this.fileUpload();
          } else {
            this.resourceSave();
          }
        } else {
          return false;
        }
      });
    },
    resourceSave() {
      let resourceParam = {};
      if (this.uploadOrNot) {
        resourceParam.path = this.uploadInfo.file_path;
      }
      resourceParam.class_id = this.$route.params.id;
      let success = (data) => {
        this.$message.success(data.msg);
        setTimeout(() => {
          this.$router.back();
        }, 1000);
        
      };
      let fail = (res) => {
        this.longTimeMessage(res, 15000);
      };

      this.$ajax.post("api/studystatus/studystatus_import", resourceParam, {
        func: { success: success, fail: fail },
      });
    },
    /**
     * 长时间的信息提示
     */
    longTimeMessage(res, time) {
      const that = this;
      let msg = "";
      if (typeof res.msg == "object") {
        for (let i = 0; i <= res.msg.length - 1; i++) {
          msg += `<p style="line-height:20px;color:#f56c6c">${res.msg[i]}</p>`;
        }
      } else {
        msg = res.msg;
      }

      that.messageObj = that.$alert(msg, {
        duration: time,
        type: "warning",
        dangerouslyUseHTMLString: true,
      });
    },
    //上传成功的事件
    fileSuccess(rootFile, file, message, chunk) {
      this.selectFileShow = true;
      var mess = eval("(" + message + ")");
      mess = handleResponseData(mess);

      if (parseInt(mess.data.status) === 1) {
        this.uploadOrNot = true;
        this.uploadInfo.file_name = mess.data.file_name;
        this.uploadInfo.file_path = mess.data.file_path;
        this.uploadInfo.post_fix = mess.data.post_fix;

        this.resourceSave();
      } else if (mess.status === "fail") {
        this.$message.error(mess.msg + " " + file.name);
        this.$refs.uploader.uploader.cancel();
      }
      this.excelUploader.removeFile(file);
    },
    fileFail(rootFile, file, message, chunk) {
      // uploaderFileFail(this, this.excelUploader, file, message);
      let mess = JSON.parse(message);

      if (+mess.error === 401 && this.uploadRetryTimes > 0) {
        let callbcak = (res) => {
          this.uploadRetryTimes--;
          this.excelUploader.retry(file);
        };

        this.get_access_token(callbcak);
      } else {
        this.$message.error(mess.msg);
        this.excelUploader.removeFile(file);
      }
    },
    //过滤文件格式
    fileSubmit(files, fileList, event) {
      for (var i = 0; i < fileList.length; i++) {
        if (this.excelUploader.fileList.length > 1) {
          //删除第一张图片
          this.excelUploader.removeFile(this.excelUploader.fileList[0]);
        }
        this.uploadInfo.file_size = fileList[i].size;
        this.selectFileOrNot = true;
        this.selectFileShow = false;
      }
    },
    fileRemoved(file) {
      this.selectFileOrNot = false;
      this.selectFileShow = true;
    },
    fileUpload() {
      this.excelUploader.resume();
    },
    back(n) {
      this.$router.go(n);
    },
  },
  destroyed(to, from, next) {
    // this.$message.closeAll();
  },
};
</script>